<template>
	<!-- 图文导航 -->
	<view class="graphicnavigation" :style="getStyle">
		<!-- 默认导航 -->
		<!-- <section class="defaultNavigation" v-if="!datas.imageList[0]" :style="{
		  background: datas.backgroundColor,
		  display: datas.imgStyle === 0 ? 'flex' : '-webkit-box',
		  'overflow-x': datas.imgStyle === 0 ? '' : 'scroll',
		}">

			导航
			<view class="navigationList" @click="click(index)" v-for="index in 5" :key="index" :style="{
				width: datas.imgStyle === 0 ? 'auto' : 375 / datas.showSize - 1 + 'px',
				backgroundColor:datas.itembgColor,
			}">
				图片
				<image src="@/static/imgs.png" alt="默认图片" v-show="datas.navigationType === 0"
					:style="{ 'border-radius': datas.borderRadius + '%' }" />
				文字
				<text :style="{ color: datas.textColor }">导航</text>
			</view>
		</section> -->


		<!-- 导航列表 -->
		<!--  v-else -->
		<section class="defaultNavigation" :style="{
			background: datas.backgroundColor,
			display: datas.imgStyle === 0 ? 'flex' : '-webkit-box',
			'flex-wrap': datas.imgStyle === 0 ? 'wrap' : 'nowrap',
			'justify-content':
			datas.imgStyle === 0 ? 'space-evenly' : 'space-around',
			'overflow-x': datas.imgStyle === 0 ? '' : 'scroll',
		}">

			<!-- 导航 -->
			<view class="navigationList" @click="click(index)"
				:class="datas.titleType=='left' || datas.titleType=='right'?'LR_title':''"
				v-for="(item, index) in datas.imageList" :key="index" :style="{
				width: datas.imgStyle === 0 ? '18%' : 375 / datas.showSize - 5 + 'px',
				backgroundColor:datas.itembgColor,
				boxShadow:datas.itemBoxShow,
				'border':datas.itemBorder!=''?'1px '+datas.itemBorder+' '+datas.itemBorderColor:'',
				'borderRadius':datas.itemborderRadius!=0?datas.itemborderRadius+'%':'0'
            }">
				<view v-if="datas.titleType== 'up' || datas.titleType== 'left'">
					<text :style="{color: datas.textColor, textAlign:datas.titleType=='left'?'left':'center',
					'font-size': datas.textSize + 'px', height: datas.textHeight + 'px', 'line-height': datas.textHeight + 'px',
				}">{{ item.text }}</text>

					<text class="title2"
						v-if="datas.title2=='1' && (datas.titleType === 'up' || datas.titleType== 'left')" :style="{
						color: datas.text2Color,
						textAlign:datas.titleType=='left'?'left':'center',
						'font-size': datas.text2Size + 'px',
						height: datas.text2Height + 'px',
						'line-height': datas.text2Height + 'px',
					}">{{ item.text2 }}</text>

				</view>

				<!-- 所有的图片 -->
				<image :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
					:style="{ 'border-radius': datas.img_borderRadius + '%' }" />

				<!-- 卡包那行的文字 -->
				<view v-if="datas.titleType === 'down' || datas.titleType === 'right'">
					<text :style="{
						color: datas.textColor,
						textAlign:datas.titleType=='right'?'left':'center',
						'font-size': datas.textSize + 'px',
						height: datas.textHeight + 'px',
						'line-height': datas.textHeight + 'px',
					}">{{ item.text }}</text>

					<text class="title2" :style="{
						color: datas.text2Color,
						textAlign:datas.titleType=='right'?'left':'center',
						'font-size': datas.text2Size + 'px',
						height: datas.text2Height + 'px',
						'line-height': datas.text2Height + 'px',
					}" v-if="datas.title2=='1' && (datas.titleType === 'down' || datas.titleType === 'right')">{{ item.text2 }}</text>
				</view>

			</view>
		</section>

	</view>
</template>

<script>
	export default {
		name: 'graphicnavigation',
		props: {
			datas: Object,

		},
		data() {
			return {
				mainStyle: ""
			}
		},
		beforeCreate() {
			// this.mainStyle=this.$comm.getCss(this.datas);
		},

		computed: {
			getStyle() {
				if (this.datas) {
					this.mainStyle = this.$comm.getCss(this.datas);
				}
				return this.mainStyle;
			}
		},
		created() {

			console.log(this.datas, '--------graphicnavigation')
		},
		methods: {
			get_titleType() {
				let t = '0';
				if (this.datas.hasOwnProperty("titleType")) {
					t = this.datas.titleType;
				}
				console.log("get_titleType", t);
				return t;
			},
			is_title2() {
				let t = false;
				if (this.datas.hasOwnProperty("title2")) {
					this.datas.title2 == '1' ? true : false;
				}
				return t;
			},
			click(index) {

				console.log("graphicnavigation->click", index)
				this.$emit("nav", {
					"type": "graphicnavigation",
					"data": this.datas.imageList[index]
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.graphicnavigation {
		position: relative;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		font-weight: bold;
		// font-size: 80rpx;

		/* 默认导航 */
		.defaultNavigation {
			// overflow-x: scroll;
			justify-content: space-evenly;

			&::-webkit-scrollbar {
				height: 1px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: #155bd4;
			}

			/deep/.el-collapse-item__header,
			/deep/.el-collapse-item__wrap {
				border-bottom: 0 !important;
			}

			.LR_title {
				display: flex !important;
				flex-direction: row !important;

				view {
					padding: 0px 2px;
					min-width: 80px;
				}

				image {
					margin: 0px;
				}

				width: auto !important;
				padding: 5px;
			}

			/* 导航 */
			.navigationList {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 2px 0px;

				image {
					margin-top: 5px;
					width: 45px;
					height: 45px;
				}

				view {
					font-size: 12px;
					margin-top: 2px;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					box-sizing: border-box;

					text {
						display: block;
					}
				}
			}
		}
	}
</style>